<template>
  <swiper ref="mySwiper" :options="swiperOptions" class="nav-items swiper">
    <swiper-slide v-for="item of iconList" :key="item.id">
      <a href="">
        <img :src="item.imgUrl" alt="" />
        <span>{{ item.desc }}</span>
      </a>
    </swiper-slide>
  </swiper>
</template>

<script>
export default {
  name: 'NavItems',
  props: ['iconList'],
  data() {
    return {
      swiperOptions: {
        slidesPerView: 4,
        slidesPerColumn: 2,
        slidesPerGroup: 4,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        autoplay: {
          delay: 5000,
          disableOnInteraction: false,
        },
      },
    }
  },
}
</script>

<style lang="scss" scoped>
// @import '~@css/mixins.scss'; // 添加全局了，不需要了
.nav-items {
  margin-left: auto;
  margin-right: auto;
  height: 4rem;
  .swiper-slide {
    height: 2rem;
    a {
      color: $fg;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      img {
        width: 75%;
      }
      span {
        @include text-ellipsis;
      }
    }
  }
}
</style>
